<template>
  <div class="login">
    <div class="loginOrlogupOrforgetbox">
      <h3>
        <img src="../../assets/imgs/logo1.png" alt="" class="logo" />
      </h3>

      <!-- 登录表单区域 -->
      <el-input
        placeholder="请输入用户名"
        v-model="username"
        clearable
        class="input"
        oninput="value=value.replace(/[^\da-zA-Z]/g,'')"
        maxLength="8"
      >
      </el-input>

      <el-input
        placeholder="请输入密码"
        v-model="password"
        show-password
        class="input"
        oninput="value=value.replace(/[^\da-z]/g,'')"
        maxLength="16"
      >
      </el-input>

      <p class="btns">
        <el-button :plain="true" @click="btn">完成</el-button>
      </p>
    </div>

    <div class="forgetpassword-logup">
      <a @click="forgetpassword">忘记密码</a>
      <a @click="logup">注册账号</a>
    </div>
  </div>
</template>

<script>
import "../../assets/css/loginOrlogupOrforget.less";

export default {
  data() {
    return {
      username: "",
      password: "",
    };
  },
  methods: {
    btn() {
      if (this.username == "") {
        this.$message({
          message: "用户名不能为空",
          type: "warning",
          center: true,
        });
      } else if (this.username.length < 5) {
        this.$message({
          message: "用户名长度不够",
          type: "warning",
          center: true,
        });
      } else if (this.password == "") {
        this.$message({
          message: "密码不能为空",
          type: "warning",
          center: true,
        });
      } else if (this.password.length < 5) {
        this.$message({
          message: "密码长度不够",
          type: "warning",
          center: true,
        });
      } else {
        this.$http
          .post("/api/user/login", {
            uname: this.username,
            upassword: this.password,
          })
          .then((res) => {
            if (res.code == 200) {
              this.$message({
                message: "登录成功，正在跳转页面",
                type: "success",
                center: true,
              });
              setTimeout(() => {
                this.$router.push({
                  path: "/add",
                });
              },1500)
            } else {
              this.$message({
                message: res.msg,
                type: "warning",
                center: true,
              });
            }
          });
      }
    },
    logup() {
      this.$router.push({
        path: "/logup",
      });
    },
    forgetpassword() {
      this.$router.push({
        path: "/forgetpassword",
      });
    },
  },
};
</script>

<style lang="less" scoped>
.forgetpassword-logup {
  position: fixed;
  display: flex;
  bottom: 0;
  width: 100%;
  height: 7vh;
  z-index: 999;
}
.forgetpassword-logup a {
  // display: block;
  flex: 1;
  color: #fff;
  font-size: 0.9rem;
  text-align: center;
  line-height: 7vh;
  border: 1px solid #e6e6e6;
}
.logo {
  width: 5rem;
  height: 5rem;
}
</style>